<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>


    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">


</head>
<body>
<div style="position: relative;width: 200px">
    <img src="" id="avater" width="200px" display="none" alt="">
    <p id="del" style="cursor: pointer; color: aliceblue;padding: 2px;text-align: center;border-radius:5px;background-color:red;position: absolute;top: 0;right: 0">删除</p>
</div>
<div id="picker">选择文件</div>


<!--引入JS-->
<script src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
<script>
    var token = '{:token()}';
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/static/webuploader' + '/js/Uploader.swf',

        // 文件接收服务端。
        server: '{:url("admin/up/upload")}',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        //设置上传域的name
        fileVal:'pic',
        //传递请求额外参数
        formData:{
            '__token__':token
        }
    });

    //回调事件
    uploader.on( 'uploadSuccess', function($file,response) {
        if(response.status == 0){
            $('#avater').attr('src',response.msg).show('slow');
        }
    });
    //点击删除事件
    $('#del').click(function () {
    let img = $(this).prev().attr('src');
        //发送ajax
        $.ajax({
            url:"{:url('admin/up/del')}",
            type:'delete',
            data:{img},
            success: function(ret) {
                if(ret.code == 1){
                    alert(ret.msg);
                    $('#avater').hide();
                }
            }
        })
    });

</script>
</body>
</html>